<template>
  <div class="customerRanking">
    <el-radio-group v-model="typeFlag" style="margin-bottom: 20px" @change="typeFlagChange">
      <el-radio-button label="0">Commercial Customer</el-radio-button>
      <el-radio-button label="1">Channel Partner</el-radio-button>
      <el-radio-button label="2">Group</el-radio-button>
    </el-radio-group>
    <div class="selectGroup">
      <div>
        <span>Geo</span>
        <el-select @change="selectGroupDataChange('geo')" v-model="selectGroupValue.geoValue" collapse-tags size="small"
                   multiple placeholder="Please Select">
          <el-option
            v-for="item in selectGroupData.geoData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>{{$t('newSearchResult.country')}}</span>
        <el-select @change="selectGroupDataChange" v-model="selectGroupValue.countryValue" collapse-tags size="small"
                   multiple placeholder="Please Select">
          <el-option
            v-for="item in selectGroupData.countryData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>BG</span>
        <el-select @change="selectGroupDataChange" v-model="selectGroupValue.BGValue" collapse-tags size="small"
                   multiple placeholder="Please Select">
          <el-option
            v-for="item in selectGroupData.BGData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>{{$t('newSearchResult.year')}}</span>
        <el-select @change="selectGroupDataChange" v-model="selectGroupValue.yearValue" size="small"
                   placeholder="Please Select">
          <el-option
            v-for="item in selectGroupData.yearData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <ag-grid-vue style="width: 100%; height:calc(100vh - 260px);" class="ag-theme-balham"
                 v-loading="themeLoading"
                 :gridOptions="TableData"
                 :enableColResize="true"
                 :enableSorting="true"
                 :enableFilter="true"
                 :groupHeaders="false"
                 :suppressRowClickSelection="true"
                 :toolPanelSuppressGroups="false"
                 :toolPanelSuppressValues="true">
    </ag-grid-vue>
  </div>
</template>

<script>
  import {AgGridVue} from "ag-grid-vue"
  import {getUsername} from "../../utils/auth";
  import agCellRenderFrame from './components/agCellRenderFrame'

  export default {
    name: 'customerRanking',
    components: {
      AgGridVue,
      agCellRenderFrame
    },
    data() {
      return {
        // ipport: 'http://10.116.42.5:9091',
        selectGroupValue: {
          geoValue: '',
          countryValue: '',
          BGValue: '',
          yearValue: 'FY1819'
        },
        selectGroupData: {
          geoData: '',
          countryData: '',
          BGData: '',
          yearData: ''
        },
        typeFlag: '0',
        themeLoading:false,
        TableData: {
          columnDefs: [
            {headerName: "Customer", field: "customer"},
            {headerName: "Customer Name", field: "customer_name"},
            {headerName: "Customer Group", field: "customer_group"},
            {headerName: "Customer Geo", field: "customer_geo"},
            {headerName: "customer_country_code", field: "customer_country_code"},
            {headerName: "customer_loyalty", field: "customer_loyalty"},
            {headerName: "Rev", field: "Rev"},
            {headerName: "ALl Rev", field: "ALl Rev"},
            {
              headerName: "YTY", field: "YTY", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q1 Rev", field: "Q1 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q1 QTQ", field: "Q1 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q2 Rev", field: "Q2 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q2 QTQ", field: "Q2 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q3 Rev", field: "Q3 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q3 QTQ", field: "Q3 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q4 Rev", field: "Q4 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q4 QTQ", field: "Q4 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Profit($)", field: "profit", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            }
          ],
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        }
      }
    },
    methods: {
      createColumnDefs() {
        if (this.typeFlag == '0') {
          return [
            {headerName: "ID", field: "customer"},
            {headerName: "Commercial Customer", field: "customer_name"},
            {headerName: "Group", field: "customer_group"},
            {headerName: "Geo", field: "customer_geo"},
            {headerName: "Country", field: "customer_country_code"},
            {headerName: "Loyalty", field: "customer_loyalty"},
            {headerName: "Rev($)", field: "Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth},
            {headerName: "Total Rev($)", field: "ALl Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth},
            {
              headerName: "YTY", field: "YTY", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q1 Rev($)", field: "Q1 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q1 QTQ", field: "Q1 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q2 Rev($)", field: "Q2 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q2 QTQ", field: "Q2 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q3 Rev($)", field: "Q3 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q3 QTQ", field: "Q3 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q4 Rev($)", field: "Q4 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q4 QTQ", field: "Q4 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            }
          ]
        } else if(this.typeFlag == '1') {
          return [
            {headerName: "ID", field: "customer"},
            {headerName: "Channel Partner", field: "customer_name"},
            {headerName: "Group", field: "customer_group"},
            {headerName: "Geo", field: "customer_geo"},
            {headerName: "Country", field: "customer_country_code"},
            {headerName: "Loyalty", field: "customer_loyalty"},
            {headerName: "Rev($)", field: "Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth},
            {headerName: "Total Rev($)", field: "ALl Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth},
            {
              headerName: "YTY", field: "YTY", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q1 Rev($)", field: "Q1 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q1 QTQ", field: "Q1 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q2 Rev($)", field: "Q2 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q2 QTQ", field: "Q2 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q3 Rev($)", field: "Q3 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q3 QTQ", field: "Q3 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q4 Rev($)", field: "Q4 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q4 QTQ", field: "Q4 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            }
          ]
        } else {
          return [
            // {headerName: "ID", field: "customer"},
            // {headerName: "Channel Partner", field: "customer_name"},
            {headerName: "Group", field: "customer_group"},
            // {headerName: "Geo", field: "customer_geo"},
            // {headerName: "Country", field: "customer_country_code"},
            // {headerName: "Loyalty", field: "customer_loyalty"},
            {headerName: "Rev($)", field: "Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth},
            {headerName: "Total Rev($)", field: "ALl Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth},
            {
              headerName: "YTY", field: "YTY", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q1 Rev($)", field: "Q1 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q1 QTQ", field: "Q1 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q2 Rev($)", field: "Q2 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q2 QTQ", field: "Q2 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q3 Rev($)", field: "Q3 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q3 QTQ", field: "Q3 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            },
            {
              headerName: "Q4 Rev($)", field: "Q4 Rev", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Q4 QTQ", field: "Q4 QTQ", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: percent
            }
          ]
        }
      },
      async getTableData() {
          this.themeLoading=true;
        let res = ''
        let params = {
          geo: this.selectGroupValue.geoValue,
          country_code: this.selectGroupValue.countryValue,
          bg: this.selectGroupValue.BGValue,
          year: this.selectGroupValue.yearValue.toString(),
          flag: this.typeFlag
        }
        if (this.typeFlag == '2') {
          res = await this.axios.post('/customerRanking/groupRankTable', params)
        } else {
          res = await this.axios.post('/customerRanking/rankTable', params)
        }
        let data = res.data.data
        // let data = res.data.data.list.sort((a, b) => {
        //   return parseInt(a.rank) - parseInt(b.rank)
        // })
        this.TableData.api.setColumnDefs(this.createColumnDefs())
        this.TableData.api.setRowData(data)
        // this.TableData.api.sizeColumnsToFit()
        this.themeLoading=false
      },
      async getGeoData() {
        let res = await this.axios.post('/dropSelect/geoSelect.do', {username: getUsername()})
        let data = res.data.data
        this.selectGroupData.geoData = data.geo.map(v => {
          return {
            label: v,
            value: v
          }
        })
      },
      async getRegionData() {
        let res = await this.axios.post('/dropSelect/countrySelect.do', {username: getUsername()})
        let data = res.data.data
        this.selectGroupData.countryData = data.country.map(v => {
          return {
            label: v,
            value: v
          }
        })
      },
      async getBGData() {
        let res = await this.axios.post('/dropSelect/bgSelect.do', {username: getUsername()})
        let data = res.data.data
        this.selectGroupData.BGData = data.map(v => {
          return {
            label: v,
            value: v
          }
        })
      },
      async getYearData() {
        let res = await this.axios.post('/customerRanking/yearSelect', {username: getUsername()})
        let data = res.data.data
        console.log(data)
        this.selectGroupData.yearData = data.year.map(v => {
          return {
            label: v,
            value: v
          }
        })
      },
      async changeGeo() {  //geo和country联动
        let res = await this.axios.post('/dropSelect/geoSelect.do', {username: getUsername(),geos: this.selectGroupValue.geoValue})
        let data = res.data.data
        this.selectGroupData.countryData = data.country.map(v => {
          return {
            label: v,
            value: v
          }
        })
      },
      selectGroupDataChange(flag) {
        if(flag == 'geo' && this.selectGroupValue.geoValue.toString() !== '') {
          this.changeGeo()
          this.selectGroupValue.countryValue = []
        }
        this.getTableData()
      },
      typeFlagChange() {
        this.getTableData()
      }
    },
    mounted() {
      this.getGeoData()
      this.getRegionData()
      this.getBGData()
      this.getYearData()
      this.getTableData()
    }
  }

  function numSort(data1, data2) {
    var Number1 = parseFloat(data1) || data1
    var Number2 = parseFloat(data2) || data2
    if (!!Number1 === !!null && !!Number2 === !!null) {
      return 0
    }
    if (!!Number1 === !!null) {
      return -1
    }
    if (!!Number2 === !!null) {
      return 1
    }
    return Number1 - Number2
  }

  function percent(params) {
    if(params.value == '-') {
      return '-'
    }
    return `${(params.value * 100).toFixed(2)}%`
  }

  function moneyThousandth(params) {
    if (params.value == undefined) {
      return
    }
    // console.log(params.value)
    // return comdify(parseFloat(params.value).toFixed(2).toString())
    if (params.value.toString() == '0' || params.value.toString() == '') {
      return params.value.toString()
    } else {
      return comdify(parseFloat(params.value).toFixed(2).toString())
    }
  }

  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {

      return s1.replace(re, "$&,") + s2
    })
    return n1
  }

</script>

<style scoped lang="scss">
  .customerRanking {
    margin: 0 20px;
    padding: 20px 0;
  }

  .selectGroup {
    height: 10vh;
    background: #fff;
    text-align: center;
    & > div {
      display: inline-block;
      margin-top: 3vh;
      margin-left: 20px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
</style>

